import { useEffect, useState } from 'react'
import { Row, Col, Card, Modal, Button, Dropdown, Image } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import './index.less'
import { getImageByUrl } from '@/utils/getImageByUrl'
const { confirm } = Modal
export interface Iprops {
  cardList: Record<string, any>[] | undefined
  delCallback: (...set: any) => void
  goEdit: (...set: any) => void
  goDetail: (...set: any) => void
  topColResponsiveProps?: {
    xs?: number
    sm?: number
    md?: number
    lg?: number
    xl?: number
    style?: React.CSSProperties
  }
}

export default function TableComponent(props: Iprops) {
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    setTimeout(() => {
      setLoading(false)
    }, 200)
  }, [])
  const topColResponsiveProps = {
    xs: 24,
    sm: 12,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6,
    style: { marginBottom: 24 },
    ...props.topColResponsiveProps,
  }
  return (
    <div className="production_list">
      <Row gutter={10}>
        {props?.cardList?.map((item) => {
          return (
            <Col {...topColResponsiveProps} key={item.id}>
              <Card
                loading={loading}
                hoverable
                actions={[
                  <Button onClick={() => props.goDetail(item)} type="link" key={'detail'}>
                    详情
                  </Button>,
                  <Button onClick={() => props.goEdit(item)} type="link" key={'edit'}>
                    编辑
                  </Button>,
                  <Button
                    type="link"
                    danger
                    key={'del'}
                    onClick={() => {
                      confirm({
                        title: '确定删除此菜品吗?',
                        okText: '确认',
                        cancelText: '取消',
                        icon: <ExclamationCircleOutlined />,
                        onOk: () => props.delCallback(item),
                        onCancel() {
                          console.log('Cancel')
                        },
                      })
                    }}
                  >
                    删除
                  </Button>,
                ]}
              >
                <div className="main_content">
                  <div className="main_left">
                    <Image rootClassName="my_image" src={item.cover_img} fallback={getImageByUrl('moren.png')} />
                  </div>
                  <div className="main_right">
                    <div className="tit_top">
                      <div className="title">{`${item?.name}`}</div>
                      <div className="title_r">{`ID:${item?.id}`}</div>
                    </div>
                    <div className="tit_main">
                      <div className="mybox_center">
                        <div className="type_left">{'产品类型：' + (item.price || '--')}</div>
                        <div className="type_left">{'接入方式：' + (item.price || '--')}</div>
                      </div>
                      <div className="type_right">
                        <div className="num" title="">
                          1231
                        </div>
                        <div style={{ whiteSpace: 'nowrap' }}>设备总数</div>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
          )
        })}
      </Row>
    </div>
  )
}
